<template>
  <div class="audition116">
    <p>那么为什么会产生这个问题呢？主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，
      <br>它是默认缩放为100%的情况下，设备像素和CSS像素的比值。</p>
    <code class="code">
      window.devicePixelRatio=物理像素 /CSS像素
    </code>
    <p>
      目前主流的屏幕DPR=2 （iPhone 8）,或者3 （iPhone 8 Plus）。拿2倍屏来说，<br />设备的物理像素要实现1像素，而DPR=2，所以css 像素只能是 0.5。一般设<br />计稿是按照750来设计的，它上面的1px是以750来参照的，而我们写css样式是以设备<br />375为参照的，所以我们应该写的0.5px就好了啊！ 试过了就知道，iOS 8+系统支<br />持，安卓系统不支持。
    </p>
    <p>---------------------------------------</p>
    <p>推荐阅读： <a href="https://juejin.cn/post/6844903877947424782" target="_blank">移动端1px解决方案</a></p>
    <p>本篇只摘取其中的相对较好的方案，记录下来：</p>
    <h3><strong>1条border</strong></h3>
    <v-md-preview :text="text1" />
    <h3><strong>4条border</strong></h3>
    <v-md-preview :text="text2" />
  </div>
</template>

<script>
const prefix = '``` css'
const suffix = '```'
export default {
  name: 'Audition116',
  data() {
    return {
      text1: `${prefix}
      .setOnePx{
        position: relative;
        &::after{
          position: absolute;
          content: '';
          background-color: #e5e5e5;
          display: block;
          width: 100%;
          height: 1px; /*no*/
          transform: scale(1, 0.5);
          top: 0;
          left: 0;
        }
      }
      \n${suffix}`,
      text2: `${prefix}
      .setBorderAll{
        position: relative;
          &::after{
            content:" ";
            position:absolute;
            top: 0;
            left: 0;
            width: 200%;
            height: 200%;
            transform: scale(0.5);
            transform-origin: left top;
            box-sizing: border-box;
            border: 1px solid #E5E5E5;
            border-radius: 4px;
          }
        }
      \n${suffix}`,
    }
  }
}
</script>

<style>

</style>